<!--挂号订单-->
<template>
  <!--展示所有的订单-->
  <el-card class="box-card" style="margin-bottom: 20px">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <!--用户选择的下拉菜单-->
    <el-form :inline="true">
      <el-form-item label="就诊人">
        <el-select v-model="patientId" v-on:change="userChangeHandle" placeholder="请选择就诊人">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="item in allUser" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="orderStatus" v-on:change="orderStatuChangeHandle" placeholder="请选择订单状态">
          <el-option value="" label="全部"></el-option>
          <el-option v-for="(item,index) in allOrderStatus" :value="item.status" :key="index" :label="item.comment"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!--表格展示订单状态数据-->
    <el-table border :data="allOrderArr" :stripe="true" :fit="true" height="63vh" style="margin-bottom:15px">
      <el-table-column prop="reserveDate" label="就诊时间" header-align="center" align="center" width="110px"></el-table-column>
      <el-table-column prop="hosname" label="医院" header-align="center" align="center" width="260px"></el-table-column>
      <el-table-column prop="depname" label="科室" header-align="center" align="center" width="210px"></el-table-column>
      <el-table-column prop="title" label="医生职称" header-align="center" align="center" width="120px"></el-table-column>
      <el-table-column prop="amount" label="费用" header-align="center" align="center" width="60px"></el-table-column>
      <el-table-column prop="patientName" label="就诊人" header-align="center" align="center" width="110px"></el-table-column>
      <el-table-column prop="param.orderStatusString" label="订单状态" header-align="center" align="center" width="150px"></el-table-column>
      <el-table-column prop="" label="操作" header-align="center" align="center" width="60px">
        <template #="{row}">
          <el-button link @click="goDetail(row)" style="color: #55a6fe;font-weight: bold">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页器-->
    <el-pagination
        v-model:current-page="pageNo"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        :background="true"
        layout="prev, pager, next, jumper, ->, total, sizes"
        :total="total"
        @current-change="getOrderInfo"
        v-on:size-change="sizeChangeHander"
    />
  </el-card>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import {reqAllOrderStatus, reqAllUser, reqUserOrderInfo} from "@/api/user";
import {
  AllOrderStatusArr,
  AllOrderStatusResponseData,
  ALLUserArr,
  AllUserResponseData,
  Records,
  UserOrderInfoResponseData
} from "@/api/user/type.ts";
import {useRouter} from "vue-router";

// 获取路由器对象
let $router = useRouter();

// 当前分页器页码
let pageNo = ref<number>(1);
// 当前页码展示几条数据
let pageSize = ref<number>(10);

// 收集就诊人的ID
let patientId = ref<string>("");
// 手机订单的状态
let orderStatus = ref<string>("");
// 存储所有订单
let allOrderArr = ref<Records>([]);
// 存储订单的总个数
let total = ref<number>(0);

// 存储全部就诊人的信息
let allUser = ref<ALLUserArr>([]);
// 存储全部订单的状态
let allOrderStatus = ref<AllOrderStatusArr>([]);

// 获取订单的方法
const getOrderInfo = async (page: number = 1) => {
  pageNo.value = page;
  let result: UserOrderInfoResponseData = await reqUserOrderInfo(pageNo.value, pageSize.value, patientId.value, orderStatus.value);
  if (result.code == 200) {
    allOrderArr.value = result.data.records;
    console.log("allOrderArr",result)
    total.value = result.data.total;
    console.log("total.value",total.value)
  }
}

// 详情按钮回调
const goDetail = (row:any) => {
  $router.push({path:"/user/order",query:{orderId: row.id}});
}

// 下拉菜单事件的回调
const sizeChangeHander = (pagesize: number) => {
  pageSize.value = pagesize;
  getOrderInfo();
};

// 获取区别就诊人和订单状态
const getAllUsersOrdersData = async () => {
  const allUserResult: AllUserResponseData = await reqAllUser();
  allUser.value = allUserResult.data;
  const allOrderStatusResult: AllOrderStatusResponseData = await reqAllOrderStatus();
  allOrderStatus.value = allOrderStatusResult.data;
}

// 用户通过下拉菜单选择就诊人时的回调
const userChangeHandle = () => {
  //通过就诊人的id再次获就诊人的数据
  getOrderInfo();
}
// 用户通过下拉菜单选择就支付状态的回调
const orderStatuChangeHandle = () => {
  //通过订单状态再次获取挂号订单的数据
  getOrderInfo();
}

onMounted(() => {
  // 获取订单数据
  getOrderInfo();
  // 获取全部就诊人和订单的信息
  getAllUsersOrdersData();

});

</script>

<style scoped lang="scss">

</style>